﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>管理首页</title>
    <link rel="stylesheet" href="~/lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="~/css/default/style.css">
</head>

<body class="mainbody">
    <div id="app" v-cloak>
        <div class="location">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>
                    <i class="el-icon-s-home"></i>
                    管理中心
                </el-breadcrumb-item>
                <el-breadcrumb-item>首页</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="content-box">
            <el-row :gutter="20">
                <el-col :span="16" :xs="24">
                    <el-row :gutter="20">
                        <el-col :xs="24" :md="10">
                            <!--统计信息-->
                            <el-row :gutter="20" class="count-box">
                                <el-col :span="12">
                                    <el-card class="item-bg">
                                        <h1>{{siteCount}}<span>个</span></h1>
                                        <p>站点数量</p>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card>
                                        <h1>{{memberCount}}<span>位</span></h1>
                                        <p>新增会员</p>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card>
                                        <h1>{{rechargeCount}}<span>条</span></h1>
                                        <p>今日充值</p>
                                    </el-card>
                                </el-col>
                                <el-col :span="12">
                                    <el-card class="item-bg">
                                        <h1>{{rechargeAmount}}<span>元</span></h1>
                                        <p>今日收入</p>
                                    </el-card>
                                </el-col>
                            </el-row>
                            <!--/统计信息-->
                        </el-col>
                        <el-col :xs="24" :md="14" class="mab-20">
                            <!--待办事件-->
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-date"></i>
                                    <span>待办事件</span>
                                </div>
                                <div class="ibtn-box">
                                    <el-row :gutter="20">
                                        <el-col :span="12">
                                            <el-badge :value="memberReview">
                                                <a href="/member/audit">
                                                    <i class="el-icon-user"></i>
                                                    <span>待审会员</span>
                                                </a>
                                            </el-badge>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-badge :value="articleCount">
                                                <a href="javascript:;">
                                                    <i class="el-icon-document-checked"></i>
                                                    <span>待审文章</span>
                                                </a>
                                            </el-badge>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-badge :value="contributeCount">
                                                <a href="javascript:;">
                                                    <i class="el-icon-chat-dot-round"></i>
                                                    <span>待审搞件</span>
                                                </a>
                                            </el-badge>
                                        </el-col>
                                        <el-col :span="12">
                                            <el-badge :value="paymentCount">
                                                <a href="/member/rechargelist">
                                                    <i class="el-icon-bank-card"></i>
                                                    <span>待支付充值</span>
                                                </a>
                                            </el-badge>
                                        </el-col>
                                    </el-row>
                                </div>
                            </el-card>
                            <!--/待办事件-->
                        </el-col>
                        <el-col :span="24" class="mab-20">
                            <el-card>
                                <div id="userChart" style="height:282px;"></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="8" :xs="24">
                    <el-row>
                        <el-col :span="24" class="mab-20">
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-monitor"></i>
                                    <span>系统信息</span>
                                </div>
                                <div class="cinfo-box">
                                    <el-timeline>
                                        <el-timeline-item color="#0bbd87" :timestamp="adminInfo.lastIp">本次登录IP</el-timeline-item>
                                        <el-timeline-item :timestamp="adminInfo.lastTime">本次登录时间</el-timeline-item>
                                        <el-timeline-item :timestamp="adminInfo.addTime">账户注册时间</el-timeline-item>
                                    </el-timeline>
                                    <el-divider></el-divider>
                                    <div class="dl-box clearfix">
                                        <dl>
                                            <dt>主站名称</dt>
                                            <dd>{{config.webName}}</dd>
                                        </dl>
                                        <dl>
                                            <dt>主站域名</dt>
                                            <dd>{{config.webUrl}}</dd>
                                        </dl>
                                        <dl>
                                            <dt>公司名称</dt>
                                            <dd>{{config.webCompany}}</dd>
                                        </dl>
                                        <dl>
                                            <dt>当前版本</dt>
                                            <dd>{{config.webVersion}}</dd>
                                        </dl>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-col :span="24" class="mab-20">
                            <el-card>
                                <div slot="header" class="clearfix">
                                    <i class="el-icon-bell"></i>
                                    <span>官方消息</span>
                                </div>
                                <div class="author-box">
                                    <ul v-html="noticeList">
                                    </ul>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>

    <script src="~/lib/vue/vue.js"></script>
    <script src="~/lib/element-ui/index.js"></script>
    <script src="~/lib/axios/axios.min.js"></script>
    <script src="~/lib/echarts/echarts.min.js"></script>
    <script src="~/js/axios.config.js"></script>
    <script>
	//初始化VUE
        var vm = new Vue({
            el: '#app',
            data: {
                siteCount: 0,
                memberCount: 0,
                memberReview: 0,
                rechargeCount: 0,
                rechargeAmount: 0,
                paymentCount: 0,
                contributeCount: 0,
                articleCount: 0,
                noticeList: null,
                memberList: null,
                adminInfo: [],
                config: [],
                echartList: []
            },
            methods: {
                //初始化图表
                initChart: function () {
                    //处理数据
                    let title = [];
                    let data = [];
                    this.memberList.map(item => {
                        title.push(item.title);
                        data.push(item.count);
                    });
                    //基于准备好的dom，初始化echarts实例
                    let echart = echarts.init(document.getElementById('userChart'));
                    this.echartList.push(echart);
                    //绘制图表
                    echart.setOption({
                        color: ['#3398DB'],
                        title: { text: '会员注册情况', subtext: '默认显示当月统计数据', textStyle: { fontSize: 16, fontWeight: "normal" } },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '2%',
                            right: '2%',
                            bottom: '5%',
                            width: 'auto',
                            height: 'auto',
                            containLabel: true
                        },
                        xAxis: {
                            data: title,
                            axisTick: {
                                alignWithLabel: true
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: '新增用户',
                            type: 'bar',
                            data: data
                        }]
                    });
                },
            },
            created: function () {
                let _this = this;
                //加载管理员信息
                AxiosAjax({
                    method: 'get',
                    url: '/admin/info',
                    success: function (res) {
                        _this.adminInfo = res.data;
                    }
                });
                //加载站点信息
                AxiosAjax({
                    url: '/client/setting/sysconfig',
                    success: function (res) {
                        _this.config = res.data;
                    }
                });
                //站点数量
                AxiosAjax({
                    url: '/site/view/count',
                    success: function (res) {
                        _this.siteCount = res.data;
                    }
                });
                //新增会员
                AxiosAjax({
                    url: '/member/view/count?status=0',
                    success: function (res) {
                        _this.memberCount = res.data;
                    }
                });
                //待审会员
                AxiosAjax({
                    url: '/member/view/count?status=2',
                    success: function (res) {
                        _this.memberReview = res.data;
                    }
                });
                //今日充值数量
                let day = new Date();
                AxiosAjax({
                    url: '/member/recharge/view/count?status=1&startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
                    success: function (res) {
                        _this.rechargeCount = res.data;
                    }
                });
                //今日充值金额
                AxiosAjax({
                    url: '/member/recharge/view/amount?status=1&startTime=' + day.getFullYear() + "-" + (day.getMonth() + 1) + "-" + day.getDate(),
                    success: function (res) {
                        _this.rechargeAmount = res.data;
                    }
                });
                //待支付充值数量
                AxiosAjax({
                    url: '/member/recharge/view/count?status=0',
                    success: function (res) {
                        _this.paymentCount = res.data;
                    }
                });
                //待审稿件数量
                AxiosAjax({
                    url: '/article/contribute/view/count?status=0',
                    success: function (res) {
                        _this.contributeCount = res.data;
                    }
                });
                //待审文章数量
                AxiosAjax({
                    url: '/article/view/count?status=1',
                    success: function (res) {
                        _this.articleCount = res.data;
                    }
                });
                //获取会员统计列表
                AxiosAjax({
                    url: '/member/view/report',
                    success: function (res) {
                        _this.memberList = res.data;
                        _this.initChart();
                    }
                });
                //官方消息动态
                AxiosAjax({
                    url: '/setting/official/notice',
                    success: function (res) {
                        _this.noticeList = res.data;
                    }
                });
            }
        })
    </script>
</body>
</html>